<template>
	<el-dialog :showDialog class="container" width="40%" :close-on-click-modal="false"
		@close="handleClose(ruleFormRef)">
		<TitleBox :title="title"></TitleBox>
		<el-form class="layout-form" :rules="rules" :model="passwordInfo" ref="ruleFormRef">
			<el-form-item label="旧密码" label-width="100px" prop="oldPassword">
				<el-input type="password" v-model="passwordInfo.oldPassword" show-password clearable></el-input>
			</el-form-item>
			<el-form-item label="新密码" label-width="100px" prop="newPassword">
				<el-input type="password" v-model="passwordInfo.newPassword" show-password clearable></el-input>
			</el-form-item>
			<el-form-item label="确认密码" label-width="100px" prop="confirmPassword">
				<el-input type="password" v-model="passwordInfo.confirmPassword"></el-input>
			</el-form-item>
			<el-form-item class="layout-footer">
				<el-button style="background-color: #ccc;color: white;" @click="cancle">取消</el-button>
				<el-button type="primary" @click="confirm(ruleFormRef)">确定</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
</template>

<script setup lang='ts'>
import { changePassword } from '@/api/user';
import { ElMessage } from 'element-plus';
import { reactive, ref } from 'vue';
import TitleBox from '../titleBox/index.vue';

const title = ref('修改密码');

defineProps(['showDialog']);
const emit = defineEmits(['cancle', 'confirm']);
// 输入的数据
const passwordInfo = reactive({
	"oldPassword": "",
	"newPassword": "",
	"confirmPassword": "",
})
// 验证
const ruleFormRef = ref();
// 验证确认密码
const ConfirmPassword = (rule: any, value: any, callback: any) => {
	console.log(rule)
	if (passwordInfo.newPassword !== value) {
		callback(new Error("两次输入的密码不一致"));
	} else {
		callback();
	}
}
// 校验规则
const rules = reactive({
	"oldPassword": [
		{ required: true, message: '请输入旧密码', trigger: 'blur' },
		{ pattern: /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,16}$/, message: '密码必须由8-16位字母和数字组合', trigger: 'blur' }
	],
	"newPassword": [
		{ required: true, message: '请输入新密码', trigger: 'blur' },
		{ pattern: /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,16}$/, message: '密码必须由8-16位字母和数字组合', trigger: 'blur' }
	],
	"confirmPassword": [
		{ required: true, message: '请确认密码', trigger: 'blur' },
		{ required: true, validator: ConfirmPassword, trigger: 'blur' }
	]
})

// 确定修改
const confirm = async (formEl: any) => {
	if (!formEl) return;
	await formEl.validate(async (isOK: any) => {
		if (isOK) {
			try {
				const res = await changePassword(passwordInfo);
				// console.log('修改密码', res);
				if (res.data.code === 0) {
					emit('confirm', false);
					ElMessage({
						message: '重置成功',
						type: 'success',
					})
				} else {
					ElMessage({
						message: '重置失败',
						type: 'error',
					})
				}
			} catch (error) {
				ElMessage({
					type: 'error',
					message: '修改失败'
				})
			}
		} else {
			console.log('输入框不能为空！');
		}
	})

}
// 取消
const cancle = () => {
	emit('cancle', false);
}

// 关闭对话框
const handleClose = (formEl: any) => {
	if (!formEl) return;
	formEl.resetFields();
	passwordInfo.confirmPassword = '';
}
</script>

<style scoped lang='scss'>
.container {
	margin-top: 20px;

	// 表单
	.layout-form {
		margin-top: 20px;

		// 密码报错提示
		:deep(.el-form-item__error) {
			left: 10px;
		}

		.el-input {
			width: 90%;
			margin-left: 10px;
		}

		.layout-footer {
			margin-top: 30px;
			margin-left: 70%;
		}
	}


}
</style>